﻿<!DOCTYPE html>
<html>
<head>
    <title></title>    
     <link href="jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
    <link href="grid.css" rel="stylesheet" type="text/css" />        
    <link href="benchmarks.css" rel="stylesheet" type="text/css" />        

    <script src="jquery-1.6.2.js"></script>
     <script src="jquery-ui-1.8.16.custom.js"></script>
     
       <script src="sprintf.js"></script>     
     <script src="extensions-array.js"></script>               
    <script src="grid.js"></script>
     
    <script src="benchmarks.js"></script>     

    <link href="jqgrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />        
    <script src="jqgrid/jquery.jqgrid.src.js"></script>
     
    
    
    <script type="text/javascript">
        var N = 100;
        $(function () {            
            $("body").append(sprintf("%s rows, %s cols, %s", N, BENCHMARKS.M, BENCHMARKS.timeprofile(renderWithjqGrid)));
        });

        function renderWithjqGrid() {
            var data = BENCHMARKS.dataSource.slice(0, N);
                $("body").append("<div><table id='jqgrid'></table></div>");
                var colmodel = (function () {
                    var cols = [];
                    for ($key in data[0]) {
                        cols.push({ name: $key, width: 100 });
                    }
                    return cols;
                })();
                $("#jqgrid").jqGrid({
	                datatype: "local",
	                height: 250,
                    colModel: colmodel
	            });
                for (var i = 0, n = data.length; i < n; i++) {
                    $("#jqgrid").jqGrid('addRowData', i + 1, data[i]);
	            }	           
        };

    </script>    
   
</head>
<body>        
    
</body>
</html>
